<template>
  <view class="login-container">
    <view class="nav_title">神领快递</view>
    <!-- 标题 -->
    <view class="login_mode">
      <view class="title">{{ loginMethodObj.title }}</view>
      <!-- 切换登录方式的值 -->
      <view class="right_more" @click="methodIndex = methodIndex? 0: 1">
        <view class="title">{{ loginMethodObj.subTitle }}</view>
        <image src="/static/icon/right_more.png" />
      </view>
    </view>
    <Mobile v-if="!methodIndex"/>
    <Password v-else />
  </view>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import Mobile from './component/mobile.vue'
  import Password from './component/password.vue'


  const loginMethodList = [
    { title: '手机号登录', subTitle: '账号登录' },
    { title: '账号登录', subTitle: '手机号登录' },
  ]

  const methodIndex = ref(1) // 登录方式的值
  // 切换登录方式
  const loginMethodObj = computed(() => loginMethodList[methodIndex.value])
</script>

<style lang="scss" scoped>
  @import '@/uni.scss';
  .login-container {
    .nav_title {
      font-weight: 600;
      font-size: 36rpx;
      width: 100%;
      text-align: center;
    }
    padding: 40rpx;

    .login_mode {
      display: flex;
      justify-content: space-between;
      margin: 100rpx 0 90rpx 0;
      .title {
        font-size: 48rpx;
        font-weight: 500;
      }

      .right_more {
        display: flex;
        align-items: center;
        color: $uni-text-color-custom;

        .title {
          font-size: 32rpx;
          font-weight: 500;
          margin-right: 10rpx;
        }

        image {
          width: 20rpx;
          height: 20rpx;
          // background: $uni-text-color-custom;
        }
      }
    }
  }
</style>
